
<div style="POSITION: relative" id="content">
  <h3>easyUI 创建复杂TreeGrid </h3>
  <div id="article_content" class="article_content">
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">TreeGrid可以展示电子表&#26684;在多列和复杂的数据在有限的空间,这个教程将演示如何将表&#26684;数据排列在分割的grid中和多表头允许你组织共同的数据.</span><br>
    </p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344850575_4656.png" alt=""><br>
      </span></p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建 TreeGrid</h4>
    <pre name="code" class="html">&lt;table title=&quot;Complex TreeGrid&quot; class=&quot;easyui-treegrid&quot; style=&quot;width:550px;height:250px&quot;  
        url=&quot;data/treegrid2_data.json&quot;  
        rownumbers=&quot;true&quot; showFooter=&quot;true&quot;  
        idField=&quot;id&quot; treeField=&quot;region&quot;&gt;  
    &lt;thead frozen=&quot;true&quot;&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;region&quot; width=&quot;150&quot;&gt;Region&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th colspan=&quot;4&quot;&gt;2009&lt;/th&gt;  
            &lt;th colspan=&quot;4&quot;&gt;2010&lt;/th&gt;  
        &lt;/tr&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;f1&quot; width=&quot;50&quot; align=&quot;right&quot;&gt;1st qrt.&lt;/th&gt;  
            &lt;th field=&quot;f2&quot; width=&quot;50&quot; align=&quot;right&quot;&gt;2st qrt.&lt;/th&gt;  
            &lt;th field=&quot;f3&quot; width=&quot;50&quot; align=&quot;right&quot;&gt;3st qrt.&lt;/th&gt;  
            &lt;th field=&quot;f4&quot; width=&quot;50&quot; align=&quot;right&quot;&gt;4st qrt.&lt;/th&gt;  
            &lt;th field=&quot;f5&quot; width=&quot;50&quot; align=&quot;right&quot;&gt;1st qrt.&lt;/th&gt;  
            &lt;th field=&quot;f6&quot; width=&quot;50&quot; align=&quot;right&quot;&gt;2st qrt.&lt;/th&gt;  
            &lt;th field=&quot;f7&quot; width=&quot;50&quot; align=&quot;right&quot;&gt;3st qrt.&lt;/th&gt;  
            &lt;th field=&quot;f8&quot; width=&quot;50&quot; align=&quot;right&quot;&gt;4st qrt.&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>
    正如你所看见的,treegrid 的使用和datagrid一样,使用frozen属性定义冻结列,列的 'colspan' 和'rowspan' 属性定义多行表头.
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 &nbsp;EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/tree/download/easyui-treegrid2-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-treegrid-demo.zip</a></div>
    <span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&#65279;</span><br>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>